<template>
    <div class="upload">
      <div style="color: red">备注:watchEffect默认开启immediate</div>
      <br />
      <div style="color: red">
        watch和watchEffect的区别:1.都能监听响应式数据的变化，不同的是监听数据变化的方式不同，watch要明确指出监视的数据，watchEffect不用明确
        指出监视的数据(函数中用到那些属性就监听那些属性)
      </div>
      <br />
      <div>需求:当温度达到50°或者水位达到80cm发送请求</div>
      <br />
      <div>温度:{{ temp }}°C</div>
      <div>水位:{{ level }}cm</div>
      <button @click="addTemp">温度+10</button>
      <button @click="addLeve">水位+10</button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watchEffect } from "vue";
  const temp = ref(0);
  const level = ref(0);
  
  const addTemp = () => {
    temp.value += 10;
  };
  const addLeve = () => {
    level.value += 10;
  };
  
  // watch([temp, level], (value) => {
  //   const [temp, level] = value;
  //   if (temp >= 50 || level >= 80) {
  //     console.log("发送请求");
  //   }
  // });
  
  watchEffect(() => {
    if (temp.value >= 50 || level.value >= 80) {
      console.log("发送请求");
    }
  });
  </script>
  
  <style scoped lang="scss">
  @import "./index.module.scss";
  </style>
  